<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg效果
  </title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    svg {
      width: 600px;
    }

    .emojis {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 600px;

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      padding: 0 20px;
      box-sizing: border-box;
      display: flex;
    }

    .emojis li {
      flex: 1;
      font-size: 60px;
      text-align: center;
      transition: .2s all ease-in-out;
    }

    .emojis li:hover {
      transform: scale(1.6);
    }

    .emojis+svg #pop {
      r: 20px;
      transition: .2s r ease-in-out;
    }

    .emojis:hover+svg #pop {
      r: 40px;
    }
  </style>
</head>

<body>
  <ul class="emojis">
    <li>👍</li>
    <li>❤️</li>
    <li>☺️</li>
    <li>😍</li>
    <li>✌️</li>
  </ul>

  <svg viewBox="0 0 300 162">
    <filter id="mix">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -36" />
    </filter>

    <g filter="url(#mix)">
      <rect width="300" height="50" x="0" y="50" rx="25" fill="#e3e3e3" />
      <circle cx="40" cy="75" fill="#e3e3e3" id="pop" />
    </g>
  </svg>

  <script>
    const pop = document.querySelector('#pop')

    document.querySelector('.emojis').addEventListener('mousemove', (e) => {
      let offset = (e.clientX - e.currentTarget.getBoundingClientRect().left) / 2

      if (offset <= 40) offset = 40
      if (offset >= 260) offset = 260

      pop.setAttribute('cx', offset)
    })
  </script>

</body>

</html>